[bubble] Custom stateを使ったアプリの制御を試してみる

bubbleには要素に対してデータを添付することができます。 ページの表示に必要な情報やworkflowで必要な一時的な値を保存したりするときに使用できます。

例えば、ページにあるタブを切り替えることで表示・非表示にする要素を制御する　といったケースで有用なのではないでしょうか。

Custom stateはデータベースに保存するのではなく、ページに情報を保存します。なのでページを更新すると保存していた情報は失われます。

では、実際にCustom stateを設定してみます。

Custom stateの定義と設定

どの要素にも定義でき、さらに1つの要素で複数のstateを持つことができます。 そして2つの方法を使って定義することができます。

Element inspectorを使う

要素のプロパティエディタを開き、inspectアイコンをクリックします。

Element inspectorというボックスが開くので、Add a new custom state をクリックして追加していきます。

Custom stateの名前と型を決めて保存します。

Set stateアクションを使う

もう一つは、workflowのSet stateアクションで設定する方法です。

要素、Custom state、値を決めて保存します。

Custom stateを使った制御

ページにセットしたCustom stateで表示を出し分ける　というケースを考えてみます。

Custom stateのセット

404というページ要素のCustom stateをセットします。

foo というテキスト型のCustom stateを作り、bar という値を設定します。

ボタンを配置

ボタンをクリックすることでstateを変更させるために2つ配置しておきます。

Set stateアクションでCustom stateの値を変更

一つのボタンで、404のElementのCustom state　foo の値を　nyan に変更するアクションを追加します。

もう一つのボタンで、404のElementのCustom state　foo の値を　bar に変更するアクションを追加します。

制御対象の要素を配置

Custom stateの値によって表示の出し分けをしたいので、何か適当な要素を配置しましょう。

404ページに設定したCustom stateの値で判断したいので、

その要素のConditionalタブを開き、Whenの式を 404's foo is nyan とします(nyanの時に何らかのアクションを起こします)。

Select a property to change when true の設定で、Whenの式がtrueだった時のアクションを設定します。

今回は表示させたいのでThis element is visble にしてチェックボックスをONにしましょう。

これでCustom stateの値によって表示の出し分けをする設定ができました。

Previewを表示して確認してみてください。

表示例はこちら

※ ページロード時は foo is bar なので表示されていない　→ ボタンクリックで foo is nyan となるため、画像が表示される　といった制御です

最後に

単純な例ですが、Custom stateを設定し、それを使ってページ要素の制御を行ってみました。

これをアプリケーションのコードでやるとかなりめんどくさそうなイメージですが、設定だけでここまでできるととても便利だと思います。

よく使うと思われる機能なので覚えておいて損はなさそうです。